<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>强制绑定class和style</title>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style type="text/css">
    .a{
      color: red;
    }
    .b{
      color: blue;
    } .c{
      font-size: 44px;
    }
  </style>
</head>
<body>
<div id="demo">
  <h1>class绑定</h1>
  <p :class="a">字符串</p>
  <p :class="{a:true, b:false,c:true}">对象</p>
  <p :class="['b','c']">数组</p>
  <button @click="update">更新</button>

  <h1>style绑定</h1>
  <p :style="{color:aclo,fontSize:fs}">style绑定</p>
</div>
<script type="text/javascript">
  const vm = new Vue({
    el:'#demo',
    data: {
      a:'a',
      aclo:'green',
      fs:50
    },
    methods: {
      update(){
        this.a='b';
        this.aclo='yellow';
        this.font='20'

      }
    }
  });
</script>
</body>
</html>